<template>
  <div class="container">
    <h1>患者信息</h1>
    <el-form
      :model="patientForm"
      :rules="rules"
      ref="patientForm"
      label-width="100px"
      label-position="top"
      class="patientInfoForm"
      size="small"
    >
      <el-form-item label="患者姓名" prop="patientName">
        <el-input v-model="patientForm.patientName"></el-input>
      </el-form-item>
      <el-form-item label="患者卡号" prop="patientCardNumber">
        <el-input v-model="patientForm.patientCardNumber"></el-input>
      </el-form-item>
      <el-form-item label="患者年龄" prop="patientAge">
        <el-input v-model="patientForm.patientAge"></el-input>
      </el-form-item>
      <el-form-item label="出生日期" prop="patientBoth">
        <el-date-picker
          v-model="patientForm.patientBoth"
          type="date"
          placeholder="选择日期"
          editable:true
          prefix-icon="prefix"
          class="dateBoth"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="patientForm.sex" placeholder="请选择性别">
          <el-option label="男" :value="0"></el-option>
          <el-option label="女" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input v-model="patientForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="证件号码" prop="patientId">
        <el-input v-model="patientForm.patientId"></el-input>
      </el-form-item>
      <el-form-item label="接诊类型" prop="receptionType">
        <el-input v-model="patientForm.receptionType"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-cascader
          :options="options"
          v-model="patientForm.address"
          filterable
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="*" prop="registrar" class="item_ad">
        <el-input v-model="patientForm.registrar"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="note" class="item_note">
        <el-input v-model="patientForm.note"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import area from "../../../assets/area.json";
import Bus from "../../../utils/BUS";
export default {
  mounted() {
    Bus.$on("submitData", this.submitData);
  },
  methods: {
    submitData() {
      this.submitForm("patientForm");
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          Bus.$emit("subPatientForm", this.patientForm);
          this.resetForm("patientForm");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  data() {
    return {
      options: area,
      patientForm: {
        patientName: "",
        patientCardNumber: "",
        patientAge: "",
        patientBoth: "",
        sex: "",
        phone: "",
        patientId: "",
        receptionType: "",
        address: "",
        note: "",
      },
      rules: {
        patientName: [
          { required: true, message: "请输入患者姓名", trigger: "blur" },
        ],
        patientCardNumber: [
          { required: false, message: "请输入患者卡号", trigger: "blur" },
        ],
        patientAge: [
          { required: true, message: "请输入患者年龄", trigger: "blur" },
        ],
        patientBoth: [
          { required: true, message: "请输入患者出生日期", trigger: "blur" },
        ],
        sex: [{ required: true, message: "请选择患者性别", trigger: "change" }],
        phone: [
          { required: false, message: "请输入患者电话", trigger: "blur" },
        ],
        patientId: [
          { required: false, message: "请输入患者证件号", trigger: "blur" },
        ],
        receptionType: [
          { required: true, message: "请输入诊疗类型", trigger: "blur" },
        ],
        address: [
          { required: false, message: "请选择地址", trigger: "change" },
        ],
        note: [{ required: false, message: "请输入", trigger: "blur" }],
      },
    };
  },
};
</script>

<style lang='less' scoped>
.container {
  box-sizing: border-box;

  h1 {
    color: #666ee8;
    font-size: 20px;
    font-weight: 600;
  }
  .patientInfoForm {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;

    .el-form-item:nth-child(4n) {
      margin-right: 0;
    }
    /deep/ .el-form-item {
      margin-right: 20px;
      margin-bottom: 20px;

      .el-form-item__label {
        padding: 0;
        margin: 0;
        font-size: 12px;
        line-height: 20px;
        color: #5c5c65;
      }
      .el-form-item__content {
        .el-input {
          .el-input__inner {
            width: 270px;
            height: 40px;
          }
        }
        .el-select {
        }
      }

      .dateBoth {
        .prefix {
          display: none;
        }
        .el-input__inner {
          padding-left: 15px;
        }
      }
    }
    /deep/ .item_ad {
      .el-form-item__label {
        visibility: hidden;
      }
      .el-form-item__content {
        .el-input {
          .el-input__inner {
            width: 560px;
          }
        }
      }
    }
    /deep/ .item_note {
      .el-form-item__content {
        .el-input {
          .el-input__inner {
            width: 850px;
          }
        }
      }
    }
  }
}
</style>